<template>
    <div class="main el-box-init el-bkgd-white el-mg-20 el-pd-20">
        <!-- 操作按钮 -->
        <el-row class="table-btn el-pd-b-20">
            <el-button
                type="primary"
                icon="el-icon-plus"
                :size="$btnSize"
                v-if="isAuth('FRD_LINK_ADD')"
                @click="onAddOrUpdate()"
            >
                新增
            </el-button>
        </el-row>

        <el-table
            v-loading="table.loading"
            :data="table.list"
            :size="$tableSize"
            stripe
            border
            ref="tableRef"
        >
            <el-table-column prop="id" label="ID" width="80"></el-table-column>

            <el-table-column prop="title" label="站名" width="180">
                <template slot-scope="{ row }">
                    <a class="table-name" :href="row.url" target="_blank">
                        {{ row.title }}
                    </a>
                </template>
            </el-table-column>

            <el-table-column
                prop="image_url"
                label="LOGO"
                width="120"
                align="center"
            >
                <template slot-scope="{ row }">
                    <el-popover
                        placement="right"
                        trigger="hover"
                        v-if="row.image_url"
                    >
                        <img class="el-popover-img" :src="row.image_url" />

                        <img
                            class="el-popover-minImg"
                            slot="reference"
                            :src="row.image_url"
                        />
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column prop="desc" label="描述">
                <template slot-scope="{ row }">
                    <div class="table-desc">{{ row.desc }}</div>
                </template>
            </el-table-column>

            <el-table-column prop="email" label="联系邮箱"></el-table-column>

            <el-table-column prop="display" label="是否显示" width="80">
                <template slot-scope="{ row }">
                    <el-switch
                        v-model="row.display"
                        :active-value="1"
                        :inactive-value="0"
                        @change="tableSwitch(row)"
                    >
                    </el-switch>
                </template>
            </el-table-column>

            <el-table-column prop="click" label="点击量" width="80">
            </el-table-column>

            <el-table-column prop="created_time" label="创建时间">
                <template slot-scope="{ row }">
                    {{ row.created_time | formatTime }}
                </template>
            </el-table-column>

            <el-table-column
                label="操作"
                :width="$defaultActionWidth"
                align="center"
                fixed="right"
            >
                <template slot-scope="{ row }">
                    <el-button
                        type="primary"
                        icon="el-icon-plus"
                        :size="$btnSize"
                        v-if="isAuth('FRD_LINK_UPDATE')"
                        @click="onAddOrUpdate(row.id)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        :size="$btnSize"
                        type="danger"
                        icon="el-icon-delete"
                        v-if="isAuth('FRD_LINK_DEL')"
                        @click="onDel(row.id)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="table.currentPage"
            :page-sizes="table.pageSizes"
            :page-size="table.pageSize"
            :layout="table.layout"
            :total="table.total"
            background
        >
        </el-pagination>

        <!-- 新增、编辑 -->
        <dialog-add-or-update
            ref="addOrUpdate"
            :id="table.rowId"
            @refreshList="getList"
        ></dialog-add-or-update>
    </div>
</template>

<script>
import DialogAddOrUpdate from "./add-or-update.vue";
import { adminLink as Api } from "api";

export default {
    components: {
        DialogAddOrUpdate,
    },
    data() {
        return {
            //表格
            table: {
                loading: false,
                rowId: 0,
                list: [],
                currentPage: this.$config.pagination.currentPage, // 默认页
                pageSize: this.$config.pagination.pageSize, // 每页多少条
                pageSizes: this.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
                layout: this.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
                total: 0, // 总条数
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
        async getList() {
            const { code, data, msg } = await this.$axios.get(Api.getList, {
                params: {
                    page: this.table.currentPage, //查询第几页
                    per_page: this.table.pageSize, //每页多少条数据
                },
            });

            if (code == 200) {
                this.table.list = data.list;
                this.table.total = data.total;

                // 关闭加载提示
                this.table.loading = false;
            }
        },

        /* 是否显示 */
        async tableSwitch(row) {
            const { code, data, msg } = await this.$axios.post(Api.update, {
                id: row.id,
                display: row.display,
            });

            if (code == 200) {
                if (code === 200) {
                    this.$msg.success(msg);
                    this.getList();
                } else {
                    this.$msg.error(msg ? msg : data);
                }
            }
        },

        /* 删除 */
        async onDel(id) {
            // 确认删除
            const confirm = await this.$msgBox.confirm({
                cancel: true,
            });

            if (confirm) {
                const { code, msg, data } = await this.$axios.delete(Api.del, {
                    data: { id },
                });

                if (code === 200) {
                    this.$msg.success(msg);
                    this.getList();
                } else {
                    this.$msg.error(msg ? msg : data);
                }
            }
        },

        /* 新增、编辑 */
        onAddOrUpdate(id) {
            this.table.rowId = id;
            this.$refs.addOrUpdate.visible = true; // 弹窗开关
        },

        /* 每页多少条 */
        handleSizeChange(val) {
            this.table.loading = true;
            this.table.pageSize = val;
            this.getList();
        },

        /* 当前页  */
        handleCurrentChange(val) {
            this.table.loading = true;
            this.table.currentPage = val;
            this.getList();
        },
    },
};
</script>

<style lang="less" scoped>
.table-name {
    color: blue;
}
.el-popover-minImg {
    width: 50px;
    height: 50px;
}
</style>